<template>
  <div class="home-head">
    <div class="to-index">
      <router-link to="/index">首页</router-link>
    </div>
    <div class="head-logo hand-class">
      <img src="../../../static/img/home-logo.png" alt="代购商标">
    </div>
    <div class="head-localtion">所在地：{{localtion}}</div>
    <div class="head-web-name">全球代购</div>
    <div class="head-login">
      <div class="loin-yes" v-if="!loginStatus">
        <div @click="toPath(0)" class="hand-class">
          登陆
        </div>
        <div class="log-reg">
        </div>
        <div @click="toPath(2)" class="hand-class">
          注册
        </div>
        <div class="log-reg">
        </div>
      </div>
      <div class="loin-no" v-if="loginStatus">
        <p class="hand-class">姓名：{{info.userName}}</p>
        <p class="hand-class" title="积分兑换优惠卷子">积分：{{info.integral}}</p>
        <p class="hand-class" title="会员等级说明">会员：{{info.vipType}}</p>
      </div>
    </div>
    <div class="call-server  hand-class">
      <p class="iconfont icon">&#xe620;</p>
      <p>客服对话</p>
    </div>
    <div></div>
  </div>
</template>

<script>
  import {mapState, mapMutations} from "vuex"

  export default {
    name: "headhtml",
    data() {
      return {
        localtion: "中国大陆", //默认地址
        loginStatus: false,  //登录状态
        info: {}  //用户信息
      }

    },
    computed: {
      ...mapState({
        userInfo: "userInfo"

      })
    },
    methods: {
      /**
       * 判断是否存在登录
       * @param str
       */
      loginYesOrNo(str) {
        if (str !== "0") {
          str = JSON.parse(str);
          this.info = str;
          this.loginStatus = true;
        }
      },
      toPath(type) {
        console.log(this.$route.path)

        if (this.$route.path.indexOf("login")===-1) {
          this.$router.push({path: "/login/"+type});
        } else {
          this.$emit('forgetPwd', type)
          console.log("else")
        }
      }
    },
    mounted() {
      this.loginYesOrNo(this.userInfo);
    }
  }
</script>

<style scoped>

  .home-head {
    width: 100%;
    height: 60px;
    background-color: #2c3e50;
    color: white;
  }

  .home-head > > > div {
    float: left;
  }

  .head-logo {
    margin-left: 3%;
    width: 150px;
  }

  .head-logo > > > img {
    width: 95%;
    line-height: 60px;
  }

  .head-localtion {
    line-height: 60px;
    margin-left: 1%;
    font-size: 15px;
  }

  .head-web-name {
    font-size: 25px;
    color: #edffac;
    line-height: 60px;
    text-align: center;
    margin: 0 15%;
  }

  .to-index {
    font-size: 25px;
    width: 5%;
    height: auto;
    margin: 1% 2%;
  }

  .loin-no {
    width: 85px;
    height: 100%;
  }

  .loin-no > > > p {
    float: left;
    margin: 0 10%;
    text-align: center;
    margin-top: 1.5%;
    width: 84px;
    line-height: 19px;
  }

  .loin-yes {
    color: white;
    font-size: 15px;
    line-height: 25px;
  }

  .log-reg {
    border: solid 1px #cacaca;
  }

  .colour {
    color: white;
    text-decoration: none;
  }

  .call-server {
    width: 150px;
    margin: 0 5%;
    margin-top: 5px;
    color: #48ff30;
    line-height: 50px;
  }

  .call-server > > > p {
    float: left;
    font-size: 30px;

  }

  .hand-class:hover {
    cursor: pointer;
  }

  .head-login {
    margin-left: 10%;
  }

</style>
